<template>
	<view class="container">
		<view class="loginsbox">
			<view class="wechatapp">
				<!-- <view class="header"> -->
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
					style="padding: 0;">
					<image class="avatar" :src="avatarUrl"></image>
				</button>
				<!-- <open-data class="avatar" type="userAvatarUrl"></open-data> -->
				<!-- <image class="image"
						src="../../static/image/default-avatar.png">
					</image> -->
				<!-- <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" style="padding: 0;">
					  <image class="avatar" :src="avatarUrl"></image>
					</button> -->
				<view class="nicknamebox">
					<view>昵称：</view>
					<input type="nickname" class="weui-input" v-model="nickname" @blur="infonickname"
						placeholder="请输入昵称" />
				</view>
				<!-- <view  class="changeinfo" @click="login()">
						确认
					</view> -->
				<!-- </view> -->
			</view>
			<view class="auth-title">申请获取以下权限</view>
			<view class="auth-subtitle">获得你的公开信息</view>
			<button style="background-color: #CB9852;color: #FFF;" @click.stop="login">登录</button>
			<button style="margin-top: 20rpx;background-color: #CB9852;color: #FFF;"
				@click.stop="onNavigateBack">取消登录</button>
		</view>


		<!-- 获取手机号 -->
		<view class="loginbox" v-if="mobileShow">
			<view class="logininfo">
				<view class="lohintitle">请先绑定手机号</view>
				<view class="loginbut">
					<view class="butone" @click="onNavigateBack()">取消</view>
					<view class="buttwo">
						获取手机号
						<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 商城基本信息
				storeInfo: undefined,
				// 微信小程序登录凭证 (code)
				// 提交到后端，用于换取openid
				code: '',
				iv: "",
				mobileShow: false,
				avatarUrl: '../../static/person.png',
				nickname: '',
				headpicimg: '',
			}
		},
		onLoad(options) {
			uni.getNetworkType({
				success: function(res) {
					if (res.networkType === 'none') {
						uni.showToast({
							title: "您当前暂无网络，请检查网络连接",
							icon: "none"
						})
					}
				}
			});
		},
		methods: {
			async onChooseAvatar(e) {
				console.log(e, 'e', e.detail)
				const {
					avatarUrl
				} = e.detail
				this.avatarUrl = avatarUrl
				// this.headpicimg = avatarUrl
				await this.uploadFile(avatarUrl)
			},
			infonickname(e) {
				console.log(e.detail.value)
				this.nickname = e.detail.value
			},
			uploadFile(filePath) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'https://zdcloud.zxkjnc.com/' +
							'api/ajax/upload',
						filePath,
						// action:uploadimage ,
						name: 'file',
						success: (uploadFileRes) => {
							console.log(JSON.parse(uploadFileRes.data).data)
							this.headpicimg = JSON.parse(uploadFileRes.data).data.file.full_url
							resolve(JSON.parse(uploadFileRes.data).data.file.full_url || {})
						},
						fail: res => {
							reject('上传失败')
						}
					});
				})

			},
			login() {
				if (!this.headpicimg) {
					uni.showToast({
						title: '请点击上传头像',
						icon: 'none'
					})
					return;
				}
				if (!this.nickname) {
					uni.showToast({
						title: '请选择或输入昵称',
						icon: 'none'
					})
					return;
				}

				this.getUserProfile()
				// this.$http({
				//  url:'api/register/edit_user',
				//  data:{
				//   nickName:this.nickname,
				//   avatarUrl:this.headpicimg
				//  }
				// }).then(res=>{
				//  uni.switchTab({
				//  	url:'/pages/my/my'
				//  })
				// })
			},
			getUserProfile() {
				let that = this
				that.avatarUrl = that.headpicimg
				const userInfo = {
					wxName: that.nickname,
					avatarUrl: that.headpicimg
				}
				uni.setStorageSync('userInfo', userInfo)
				uni.login({
					success(res) {
						uni.showLoading({
							title: '请稍后...'
						})
						that.code = res.code
						if (res.code) {
							let param = {
								code: res.code,
								username: that.nickname,
								headpic: that.headpicimg,
								group_id: uni.getStorageSync('group_id')
							}
							let url = 'api/Wechat/wechat_login'
							that.$http({
								url,
								data: param
							}).then(res => {
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									title: '登录成功'
								})
								// setTimeout(()=> that.onNavigateBack(),1000)
								uni.setStorageSync('numInfo', res.data)
								uni.setStorageSync('token', res.data.openid)
								if (!res.data.mainPhone) {
									that.mobileShow = true
								} else {
									setTimeout(() => that.onNavigateBack(), 1000)
								}
								console.log(uni.getStorageSync('numInfo'), 'numInfo',
									res.data)
							})
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
				// uni.getUserProfile({
				// 	desc: '用于完善会员资料',
				// 	success: (res) => {
						
				// 	},
				// 	fail(res) {
				// 		console.log(res)
				// 	}
				// })
			},
			// 获取code
			onNavigateBack(delta = 1) {
				// uni.switchTab({
				// 	url:'/pages/index/index'
				// })
				const pages = getCurrentPages()
				console.log(pages)
				
				if (pages.length > 1) {
				  uni.navigateBack({
					delta: Number(delta || 1)
				  })
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			//绑定手机号
			getPhoneNumber(e) {
				console.log(e, 'e')
				this.$http({
					url: 'api/Wechat/bind_mobile',
					data: {
						code: e.detail.code,
					}
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					// setTimeout(()=> that.onNavigateBack(),1000)
					uni.switchTab({
						url: '/pages/index/index'
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-wrapper {
		margin: 100rpx auto;
		width: 130rpx;
		height: 130rpx;
		border-radius: 100%;
		display: flex;
		justify-content: center;

		.avatar {
			width: 130rpx;
			height: 130rpx;
			// border-radius: 100%;
		}
	}

	.nicknamebox {
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;

		.weui-input {
			width: 500rpx;
		}
	}

	.container {
		// padding: 0 60rpx;
		font-size: 32rpx;
		background: #fff;
		min-height: 100vh;
	}

	.loginsbox {
		margin: 0 60rpx;

		.wechatapp {
			padding: 80rpx 0 48rpx;
			border-bottom: 1rpx solid #e3e3e3;
			margin-bottom: 72rpx;
			text-align: center;

			.header {
				width: 190rpx;
				height: 190rpx;
				border: 4rpx solid #fff;
				margin: 0 auto 0;
				border-radius: 50%;
				overflow: hidden;
				box-shadow: 2rpx 0 10rpx rgba(50, 50, 50, 0.3);

				.image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
	}



	.auth-title {
		color: #585858;
		font-size: 34rpx;
		margin-bottom: 40rpx;
	}

	.auth-subtitle {
		color: #888;
		margin-bottom: 88rpx;
		font-size: 28rpx;
	}

	.loginbox {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		z-index: 99;
		top: 0;

		// left: 0rpx;
		.logininfo {
			// position: fixed;
			width: 560rpx;
			margin: auto;
			height: 250rpx;
			background-color: #ffffff;
			padding: 60rpx 50rpx 10rpx 50rpx;
			margin-top: 552rpx;
			border-radius: 20rpx;

			.lohintitle {
				width: 360rpx;
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				margin: auto;
				margin-bottom: 60rpx;
				text-align: center;
			}

			.loginbut {
				display: flex;
				justify-content: space-around;

				.butone {
					width: 190rpx;
					padding: 0 30rpx;
					height: 86rpx;
					line-height: 86rpx;
					text-align: center;
					border: 2rpx solid #CB9852;
					border-radius: 43rpx;
					font-size: 34rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #CB9852;
				}

				.buttwo {
					position: relative;
					padding: 0 30rpx;
					width: 190rpx;
					height: 86rpx;
					line-height: 86rpx;
					text-align: center;
					background: linear-gradient(180deg, #CB9852 0%, #CB9852 100%);
					border-radius: 43rpx;
					font-size: 34rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #fff;

					>button {
						position: absolute;
						opacity: 0;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>